import React, { useState } from 'react';
import { Col, Row, Card, Calendar, Table, List, Badge, Button, Statistic, Tabs, Tag, Typography } from 'antd';
import { AreaChartOutlined, PieChartOutlined, RiseOutlined, MedicineBoxOutlined, FileTextOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import weekday from 'dayjs/plugin/weekday';
import localeData from 'dayjs/plugin/localeData';
import { Line, Pie, Column } from '@ant-design/plots';
import type { LineConfig, PieConfig, ColumnConfig } from '@ant-design/plots';
import moment from 'moment';
import 'moment/locale/zh-cn';

import './index.less';

// 配置dayjs插件
dayjs.extend(weekday);
dayjs.extend(localeData);
dayjs.locale('zh-cn');

// 配置moment
moment.locale('zh-cn');

const { Title, Text } = Typography;
const { TabPane } = Tabs;

// 假数据 - 诊疗数据
const treatmentData = [
  { title: '今日接诊', value: 632, color: '#6384f8', percentage: '-28.9%' },
  { title: '待诊人数', value: 256, color: '#f89b63', percentage: '-26.9%' },
  { title: '今日治疗', value: 542, color: '#63f8cc', percentage: '-26.9%' }
];

// 假数据 - 通知公告
const announcements = [
  { id: 1, title: '"全健康自由"话题背后的新消费', type: '信息管理司', date: '2023-05-15 14:25' },
  { id: 2, title: '诊室管理系统高级版_诊室管理系统', type: '信息管理司', date: '2023-05-15 14:25' },
  { id: 3, title: '互联网医疗延伸服务案例报道', type: '信息管理司', date: '2023-05-15 14:25' },
  { id: 4, title: '医院联合职称晋升渠道指南', type: '信息管理司', date: '2023-05-15 14:25' },
  { id: 5, title: '如何能更好地促进健康？', type: '信息管理司', date: '2023-05-15 14:25' }
];

// 假数据 - 病种统计
const diseaseData = [
  { type: '呼吸', value: 440 },
  { type: '糖尿病', value: 400 },
  { type: '安宁舒克', value: 380 },
  { type: '痔疮', value: 350 },
  { type: '心脏类', value: 340 },
  { type: '高血压', value: 280 },
  { type: '肝硬化', value: 230 },
  { type: '尿道炎', value: 218 },
];

// 假数据 - 诊疗趋势
const trendData = [
  { date: '5.12', 门诊: 3, 急诊: 4, 住院: 2, 手术: 2 },
  { date: '5.13', 门诊: 5, 急诊: 7, 住院: 4, 手术: 6 },
  { date: '5.14', 门诊: 7, 急诊: 10, 住院: 8, 手术: 4 },
  { date: '5.15', 门诊: 12, 急诊: 12, 住院: 10, 手术: 8 },
  { date: '5.16', 门诊: 18, 急诊: 16, 住院: 14, 手术: 15 },
  { date: '5.17', 门诊: 22, 急诊: 20, 住院: 18, 手术: 16 },
  { date: '5.18', 门诊: 18, 急诊: 16, 住院: 13, 手术: 8 },
];

// 假数据 - 手术排行 (更新)
const surgeryData = [
  { key: 1, name: '阑尾切除术', code: '47.01', count: 12 },
  { key: 2, name: '腹腔镜胆囊切除术', code: '51.23', count: 9 },
  { key: 3, name: '疝修补术', code: '53.00', count: 8 },
  { key: 4, name: '全髋关节置换术', code: '81.51', count: 6 },
  { key: 5, name: '剖宫产术', code: '74.1', count: 5 },
  { key: 6, name: '甲状腺次全切除术', code: '06.39', count: 4 },
  // 可以根据需要添加更多数据
];

// 假数据 - 收入分析
const incomeData = [
  { type: '门诊', value: 10000, percent: 0.2 },
  { type: '住院', value: 15000, percent: 0.3 },
  { type: '药品', value: 25000, percent: 0.5 },
];

// 假数据 - 指标监控
const indicatorData = [
  { type: '门诊完成比', percent: 0.56 },
  { type: '住院完成比', percent: 0.12 },
  { type: '床位使用率', percent: 0.32 },
];

// 应用导航数据
const appItems = [
  { icon: <AreaChartOutlined style={{ fontSize: '24px', color: '#fff' }} />, title: '工作台', color: '#75b9fb' },
  { icon: <FileTextOutlined style={{ fontSize: '24px', color: '#fff' }} />, title: '公共服务', color: '#8dabfc' },
  { icon: <MedicineBoxOutlined style={{ fontSize: '24px', color: '#fff' }} />, title: '患者主索引', color: '#fc8d96' },
  { icon: <AreaChartOutlined style={{ fontSize: '24px', color: '#fff' }} />, title: '消息服务', color: '#fccc8d' },
  { icon: <FileTextOutlined style={{ fontSize: '24px', color: '#fff' }} />, title: '档案管理', color: '#8df8e2' },
  { icon: <AreaChartOutlined style={{ fontSize: '24px', color: '#fff' }} />, title: '共享文档', color: '#8dc6fc' },
  { icon: <PieChartOutlined style={{ fontSize: '24px', color: '#fff' }} />, title: '患者360', color: '#8da9fc' },
  { icon: <RiseOutlined style={{ fontSize: '24px', color: '#fff' }} />, title: '主数据管理', color: '#fc8da4' },
  { icon: <FileTextOutlined style={{ fontSize: '24px', color: '#fff' }} />, title: '数据集成', color: '#8ddefc' },
  { icon: <AreaChartOutlined style={{ fontSize: '24px', color: '#fff' }} />, title: '消息服务', color: '#fccc8d' },
  { icon: <FileTextOutlined style={{ fontSize: '24px', color: '#fff' }} />, title: '档案管理', color: '#8df8e2' },
  { icon: <AreaChartOutlined style={{ fontSize: '24px', color: '#fff' }} />, title: '共享文档', color: '#8dc6fc' },
];

// 手术排行表格列
const surgeryColumns = [
  { title: '序号', dataIndex: 'key', key: 'key', width: 60 },
  { title: '手术名称', dataIndex: 'name', key: 'name' },
  { title: '手术编码', dataIndex: 'code', key: 'code' },
  { title: '数量', dataIndex: 'count', key: 'count', width: 80 },
];

const HomePage: React.FC = () => {
  const [selectedDate, setSelectedDate] = useState(moment());

  // 诊疗趋势图配置
  const trendConfig: LineConfig = {
    data: trendData.map(item => [
      { category: '门诊', date: item.date, value: item.门诊 },
      { category: '急诊', date: item.date, value: item.急诊 },
      { category: '住院', date: item.date, value: item.住院 },
      { category: '手术', date: item.date, value: item.手术 },
    ]).flat(),
    xField: 'date',
    yField: 'value',
    seriesField: 'category',
    smooth: true,
    animation: {
      appear: {
        animation: 'path-in',
        duration: 1000,
      },
    },
    legend: {
      position: 'bottom',
    },
  };

  // 饼图配置
  const pieConfig: PieConfig = {
    appendPadding: 10,
    data: incomeData,
    angleField: 'value',
    colorField: 'type',
    radius: 0.8,
    innerRadius: 0.64,
    meta: {
      value: {
        formatter: (v: number) => `${v} 元`,
      },
    },
    label: {
      type: 'inner',
      offset: '-50%',
      autoRotate: false,
      content: '{value}',
      style: {
        textAlign: 'center',
        fontSize: 14,
      },
    },
    statistic: {
      title: {
        offsetY: -4,
        content: '总收入',
      },
      content: {
        offsetY: 4,
        formatter: () => '50000元',
      },
    },
    interactions: [
      {
        type: 'element-selected',
      },
      {
        type: 'element-active',
      },
    ],
  };

  // 柱状图配置
  const columnConfig: ColumnConfig = {
    data: diseaseData,
    xField: 'type',
    yField: 'value',
    label: {
      position: 'top',
    },
    xAxis: {
      label: {
        autoHide: true,
        autoRotate: false,
      },
    },
    meta: {
      type: {
        alias: '病种',
      },
      value: {
        alias: '数量',
      },
    },
  };

  return (
    <div className="home-dashboard">
      <Row gutter={[16, 16]}>
        {/* 左侧日历 */}
        <Col span={6}>
          <Card bordered={false} className="calendar-card">
            <Calendar
              fullscreen={false}
              value={selectedDate}
              onChange={(date) => setSelectedDate(date)}
            />
            <div className="calendar-events">
              <div className="event">
                <Badge status="warning" text="研修: 研究讨论" />
                <div className="event-time">时间: 05-19 10:00 - 05-19 11:00</div>
                <div className="event-location">地点: 公共会议室</div>
                <div className="event-host">主持人: 郭天人</div>
              </div>
              <div className="event">
                <Badge status="error" text="会议: 研究讨论" />
                <div className="event-time">时间: 05-19 10:00 - 05-19 11:00</div>
                <div className="event-location">地点: 公共会议室</div>
                <div className="event-host">主持人: 郭天人</div>
              </div>
            </div>
          </Card>
        </Col>

        {/* 中间应用导航和数据统计 */}
        <Col span={12}>
          <Row gutter={[0, 16]} style={{ height: '100%' }}>
            <Col span={24} style={{ height: 'calc(50% - 8px)' }}>
              <Card
                title="常用应用"
                bordered={false}
                className="apps-card"
                style={{ height: '100%' }}
              >
                <div className="app-grid">
                  {appItems.map((item, index) => (
                    <div key={index} className="app-item">
                      <div className="app-icon" style={{ backgroundColor: item.color }}>
                        {item.icon}
                      </div>
                      <div className="app-title">{item.title}</div>
                    </div>
                  ))}
                </div>
              </Card>
            </Col>
            <Col span={24} style={{ height: 'calc(50% - 8px)' }}>
              <Row gutter={16} style={{ height: '100%' }}>
                {treatmentData.map((item, index) => (
                  <Col span={8} key={index} style={{ height: '100%' }}>
                    <Card bordered={false} className="stat-card" style={{ padding: '16px 8px', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                      <div className="stat-title" style={{ fontSize: '16px' }}>{item.title}</div>
                      <div className="stat-value" style={{ color: item.color, fontSize: '32px' }}>{item.value}</div>
                      <div className="stat-footer" style={{ fontSize: '14px' }}>
                        较昨日同比 <span className="stat-percent">{item.percentage}</span>
                      </div>
                    </Card>
                  </Col>
                ))}
              </Row>
            </Col>
          </Row>
        </Col>

        {/* 右侧通知公告 */}
        <Col span={6}>
          <Card
            title={
              <div className="card-title-with-btn">
                <span>新闻公告</span>
                <Button type="primary" size="small">更多</Button>
              </div>
            }
            bordered={false}
            className="notice-card"
          >
            <List
              itemLayout="horizontal"
              dataSource={announcements}
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    title={<a href="#">{item.title}</a>}
                    description={<span>{item.type} · {item.date}</span>}
                  />
                </List.Item>
              )}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
        {/* 诊疗趋势 */}
        <Col span={12}>
          <Card
            title="诊疗趋势"
            bordered={false}
            className="chart-card"
          >
            <Line {...trendConfig} />
          </Card>
        </Col>

        {/* 指标监控 */}
        <Col span={12}>
          <Card
            title="指标监控"
            bordered={false}
            className="chart-card"
          >
            <Row gutter={16} justify="space-around" align="middle" style={{ height: 300 }}>
              {indicatorData.map((item, index) => (
                <Col span={8} key={index}>
                  <div style={{ textAlign: 'center' }}>
                    <Pie
                      appendPadding={10}
                      data={[
                        { type: '已完成', value: item.percent },
                        { type: '未完成', value: 1 - item.percent },
                      ]}
                      angleField="value"
                      colorField="type"
                      radius={0.8}
                      innerRadius={0.7}
                      color={['#6384f8', '#edf1fa']}
                      statistic={{
                        title: false,
                        content: {
                          style: {
                            fontSize: '20px',
                          },
                          formatter: () => `${Math.round(item.percent * 100)}%`,
                        },
                      }}
                      legend={false}
                      height={140}
                      width={140}
                    />
                    <div style={{ marginTop: 10 }}>{item.type}</div>
                  </div>
                </Col>
              ))}
            </Row>
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
        {/* 病种统计 */}
            <Col span={8}>
          <Card
            title="病种统计"
            bordered={false}
            className="chart-card"
          >
            <Column {...columnConfig} height={300} />
          </Card>
            </Col>

        {/* 手术排行 */}
            <Col span={8}>
          <Card
            title="手术排行"
            bordered={false}
            className="chart-card"
          >
            <Table
              columns={surgeryColumns}
              dataSource={surgeryData}
              pagination={{
                current: 1,
                pageSize: 6,
                total: surgeryData.length,
                simple: true,
              }}
              size="small"
              bordered={false}
            />
          </Card>
            </Col>

        {/* 收入分析 */}
            <Col span={8}>
          <Card
            title="收入分析"
            bordered={false}
            className="chart-card"
          >
            <Pie {...pieConfig} height={300} />
          </Card>
            </Col>
        </Row>
    </div>
  );
};

export default HomePage;
